<!--
 * @Author: Mr.Feng frz655379
 * @Date: 2024-01-10 22:56:00
 * @LastEditors: Mr.Feng frz655379
 * @LastEditTime: 2024-01-10 23:10:36
 * @FilePath: \interview\css样式\20231231\四角线框的跟随移动.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>四角线框的跟随移动</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        html {
            background-color: #f4f4f4;
            cursor: none;
        }
        .container{
            position: relative;
            display: flex;
        }
        .pointer{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px #ccc;
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="pointer"></div>
        <div class="item">
            <img src="https://picsum.photos/id/371/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/372/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/373/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/374/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/375/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/376/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/377/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/378/400/400" alt="" />
        </div>
        <div class="item">
            <img src="https://picsum.photos/id/379/400/400" alt="" />
        </div>        
    </div>
    <script>
        // const pointer=document.querySelector(".pointer");
        // let rad=0;
        
        // window.onmousemove=(e)=>{
        //     if(Math.abs(e.movementX)+Math.abs(e.movementY)>=5){
        //         rad=Math.atan2(e.movementX,-e.movementY)
        //     }
        //     pointer.style.transform=`translate(${e.clientX}px,${e.clientY}px) rotate(${rad}rad)`
        // }
    </script>
    
</body>

</html>